<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="gameSearchForm">
    <label for="gid">Game ID:</label>
    <input type="text" id="gid" name="gid"><br><br>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="label">Label:</label>
    <input type="text" id="label" name="label"><br><br>

    <label for="publisher">Publisher:</label>
    <input type="text" id="publisher" name="publisher"><br><br>

    <label for="date">Date:</label>
    <input type="Date" id="date" name="date"><br><br>



    <label for="sort">Sort:</label>
    <select id="sort" name="sort">
        <option value="">--Select Sort--</option>
        <option value="collect">Collect</option>
        <option value="upvote">Upvote</option>
        <option value="date">Date</option>
        <!-- Add more sort options if needed -->
    </select><br><br>

    <button type="submit">Search</button>
</form>

<div id="searchResults"></div>

<script>
    document.getElementById('gameSearchForm').addEventListener('submit', function(event) {
        event.preventDefault();

        let formData = new FormData(this);
        let jsonData = {};
        formData.forEach(function(value, key){
            jsonData[key] = value;
        });

        fetch('/games/search', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(jsonData)
        })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                let searchResultsDiv = document.getElementById('searchResults');
                searchResultsDiv.innerHTML = JSON.stringify(data);
            })
            .catch(error => console.error('Error:', error));
    });
</script>

</body>
</html>